<template>
	<view class="padding-lr32">
		<!-- <view>
			<view class="ts">
			<span>*</span><text>请仔细填写银行卡信息.绑定后,如需解绑或换卡,需要联系客服</text>
		</view>
		<view class="form">
			<view class="from-item">
				<view class="form-lable">
					持卡人
				</view>
				<view class="form-input">
					<text>{{realName}}</text>
				</view>
			</view>
			<view class="from-item">
				<view class="form-lable">
					卡号
				</view>
				<view class="form-input">
					<text v-if="boundFlag">{{cardNumber}}</text>
					<input v-else type="text" placeholder="请输入卡号" v-model="cardNumber">
				</view>
			</view>
			<view class="from-item">
				<view class="form-lable">
					开户银行
				</view>
				<view class="form-input">
					<text v-if="boundFlag">{{bankName}}</text>
					<input v-else type="text" placeholder="请输入开户银行" v-model="bankName">
				</view>
			</view>
			<view class="from-item">
				<view class="form-lable">
					开户银行地址
				</view>
				<view class="form-input">
					<text v-if="boundFlag">{{bankAddress}}</text>
					<input v-else type="text" placeholder="请输入开户银行地址" v-model="bankAddress">
				</view>
			</view>
		</view>
		<button class="submit" v-if="boundFlag">已绑定</button>
		<button class="submit1" @click="bindBankCard" v-show="!boundFlag">绑定</button>
		</view>
		 -->
        <view class="hand">
			<view class="title"> 绑定TRC提现信息</view> 
			<view>扫码</view> 
		</view>
		<view class="content">

			<input  type="text" placeholder="请输入提现地址" v-model="bankAddress">
			<input  type="text" placeholder="请输入唯一16位密钥" v-model="bankName">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				realName : '',
				cardNumber: '',
				bankName: '',
				boundFlag: false,
				bankAddress: '', //开户地址
			}
		},
		onLoad() {
			this.getMemberInfo();
		},
		methods: {

			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					var accountInfo = res.data;
					that.realName = accountInfo.realName;
					if (accountInfo.cardNumber) {
						that.boundFlag = true;
						that.cardNumber = accountInfo.cardNumber;
						that.bankName = accountInfo.bankName;
						that.bankAddress = accountInfo.bankAddress;
					}
				});
			},

			bindBankCard: function() {
				var that = this;
				if (that.cardNumber == null || that.cardNumber == '') {
					uni.showToast({
						title: "请输入卡号",
						icon: "none"
					});
					return;
				}
				if (that.bankName == null || that.bankName == '') {
					uni.showToast({
						title: "请输入开户银行",
						icon: "none"
					});
					return;
				}
				if (that.bankAddress == null || that.bankAddress == '') {
					uni.showToast({
						title: "请输入开户银行地址",
						icon: "none"
					});
					return;
				}
				uni.$uv.http.post('/member/bindBankCard', {
					cardNumber: that.cardNumber,
					bankName: that.bankName,
					bankAddress : that.bankAddress,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '操作成功!',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						}
					});
				});
			},
		}
	}
</script>


<style scoped lang="less">
	.padding-lr32 {
		padding: 0px;
	}
	.hand{
	   display: flex;
	   align-items: center;
	   justify-content: space-between;
	   padding: 32rpx 32rpx;
	  
	}
	.content{
	   input{
	  	padding: 32rpx;
	    background: #18273D;
	    border-radius: 20rpx;
	    margin: 32rpx;
	   }
	 
	}

	page {
		background:#0B1327;
		color: #fff;
		font-size: 28rpx;
	}

	.ts {
		background: #f0fafe;
		font-size: 24rpx;
		height: 64rpx;
		line-height: 64rpx;
		padding-left: 24rpx;
		color: rgb(6, 7, 12);
	}

	.submit {
		// background: linear-gradient(to right, rgb(32, 160, 214), rgb(19, 123, 189));
		background: #fff;
		color: #999;
		border: 0px;
		border-radius: 98rpx;
		height: 98rpx;
		width: 100%;
		display: block;
		margin: 0px auto;
		line-height: 98rpx;
		padding: 0px;
		width: 670rpx;
		margin-top: 80rpx;
		font-weight: bold;
		// box-shadow: 5px 5px 5px rgba(226, 242, 250, 1);

		&::after {
			border: 0px solid #fff;
		}
	}

	.submit1 {
		background: linear-gradient(to right, rgb(32, 160, 214), rgb(19, 123, 189));
		// background: #fff;'
		color: #fff;
		border: 0px;
		border-radius: 98rpx;
		height: 98rpx;
		width: 100%;
		display: block;
		margin: 0px auto;
		line-height: 98rpx;
		padding: 0px;
		width: 670rpx;
		// box-shadow: 5px 5px 5px rgba(226, 242, 250, 1);
		margin-top: 80rpx;

		&::after {
			border: 0px solid #fff;
		}
	}


	.form {
		padding: 0px 40rpx;
		box-sizing: border-box;

		.form-lable {
			color: rgb(153, 153, 153);
		}

		.from-item {
			display: flex;
			height: 103rpx;
			background: #fff;
			margin-top: 24rpx;
			border-radius: 20rpx;
			align-items: center;
			padding: 0px 32rpx;

		}

		.form-input {
			text-align: right;
			flex-grow: 1;
			display: flex;
			justify-content: right;

			text {
				color: rgb(27, 127, 180);
			}
		}

		input {
			text-align: right;
			flex-grow: 1;
			color: rgb(27, 127, 180);
		}
	}

	/deep/ .uv-radio-group {
		justify-content: right;
	}
</style>